<template>
    <div>
        <el-breadcrumb>
            <el-breadcrumb-item>首页</el-breadcrumb-item>
            <el-breadcrumb-item>库区列表</el-breadcrumb-item>
        </el-breadcrumb>
        <el-divider></el-divider>
        <el-row>
            <el-col :span="2">
                <el-button type="primary" @click="this.toadd">添加</el-button>
            </el-col>
            <el-col :span="4">
                <el-input placeholder="请输入仓库名关键字" v-model="keyword" class="input-with-select">
                    <el-button slot="append" @click="this.initData" icon="el-icon-search"></el-button>
                </el-input>
            </el-col>
        </el-row>
        <!-- 分割线 -->
        <el-divider></el-divider>
        <!-- el-table表示表格 -->
        <el-table :data="tableData.filter(data => !search || data.waName.toLowerCase().includes(search.toLowerCase()))"
            style="width: 100%">
            <!-- el-table-column表示每一列 -->
            <!-- label是表头 -->
            <!-- prop是数据的某个属性 -->
            <el-table-column label="库区编号" prop="whId"></el-table-column>
            <el-table-column label="仓库名称" prop="waName"></el-table-column>
            <el-table-column label="所在仓库" prop="wh.whName"></el-table-column>
            <el-table-column label="库区地址" prop="waAddr"></el-table-column>
            <el-table-column label="库区容量" prop="waCapacity"></el-table-column>
            <el-table-column label="可用容量" prop="waAvailableCapacity"></el-table-column>
            <el-table-column label="库区状态" prop="waStatus">
                <template slot-scope="scope">
                    <el-tag v-if="scope.row.waStatus == 0" type="success">未使用</el-tag>
                    <el-tag v-if="scope.row.waStatus == 1" type="danger">已使用</el-tag>
                </template>
            </el-table-column>
            <el-table-column label="库区备注" prop="waNote"></el-table-column>


            <el-table-column align="right">
                <template slot="header" slot-scope="scope">
                    <el-input v-model="search" size="mini" placeholder="输入关键字搜索" />
                </template>
                <template slot-scope="scope">
                    <el-button size="mini" type="primary" v-if="scope.row.waStatus == 0" @click="changeStatus(scope.row)">启用</el-button>
                    <el-button size="mini" type="warning" v-if="scope.row.waStatus == 1" @click="changeStatus(scope.row)">停用</el-button>
                    <el-button size="mini" type="success" v-if="scope.row.waStatus == 1"
                        @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                    <el-button size="mini" type="danger" v-if="scope.row.waStatus == 0"
                        @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                </template>
            </el-table-column>

        </el-table>
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="page"
            :page-sizes="[5, 10, 20, 50]" :page-size="size" layout="total, sizes, prev, pager, next, jumper" :total="total">
        </el-pagination>

        <!-- 修改库区 -->
        <el-dialog width="400px" title="库区信息" :visible.sync="dialogFormVisible">
            <!-- :model控制表单中的数据 -->
            <el-form :model="form">
                <el-form-item label="库区编号" :label-width="formLabelWidth">
                    <el-input :value="form.waId" readonly></el-input>
                </el-form-item>
                <el-form-item label="所在仓库" :label-width="formLabelWidth">
                    <el-input :value="form.wh.whName" readonly></el-input>
                </el-form-item>
                <el-form-item label="库区名称" :label-width="formLabelWidth">
                    <el-input v-model="form.waName"></el-input>
                </el-form-item>
                <el-form-item label="库区备注" :label-width="formLabelWidth">
                    <el-input v-model="form.waNote"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="updateWa">确 定</el-button>
            </div>
        </el-dialog>

        <!-- 添加库区 -->
        <el-dialog width="400px" title="库区信息" :visible.sync="dialogAddWaFormVisible">
            <!-- :model控制表单中的数据 -->
            <el-form :model="waForm">
                <el-form-item label="可用仓库" :label-width="formLabelWidth">
                    <el-select @change="getSurplus" v-model="waForm.whId" placeholder="请选择仓库">
                        <el-option v-for="(item, index) in canUseWarehouse" :label="item.whName"
                            :value="item.whId"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="剩余容量" :label-width="formLabelWidth">
                    <el-input :value="waForm.available" readonly></el-input>
                </el-form-item>
                <el-form-item label="库区名称" :label-width="formLabelWidth">
                    <el-input v-model="waForm.waName"></el-input>
                </el-form-item>
                <el-form-item label="库区地址" :label-width="formLabelWidth">
                    <el-input v-model="waForm.waAddr"></el-input>
                </el-form-item>
                <el-form-item label="设置库区容量" :label-width="formLabelWidth">
                    <el-input-number v-model="waForm.waCapacity" :min="0" :value="waForm.available"
                        :max="waForm.available"></el-input-number>
                </el-form-item>
                <el-form-item label="库区备注" :label-width="formLabelWidth">
                    <el-input v-model="waForm.waNote"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogAddWaFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="addWa">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<style>
.el-form {
    text-align: left;
}
</style>

<script>
//导入qs工具，用于格式化表单数据
import qs from 'qs'
import axios from 'axios'
export default {
    created() {
        this.initData()
    },
    data() {
        return {
            tableData: [],
            search: '',
            page: 1,
            size: 5,
            total: 0,
            keyword: '',
            dialogAddWaFormVisible: false,
            dialogFormVisible: false,
            form: {
                wh:{}
            },
            waForm: {
                waName: '',
                waAddr: '',
                waCapacity: ''
            },
            formLabelWidth: '80px',
            isShow: false,
            canUseWarehouse: [],
            radio1: '0',
        }
    },
    methods: {
        // 获取可用容量
        getSurplus() {
            var list = this.canUseWarehouse;
            for (var i = 0; i < list.length; i++) {
                if (list[i].whId == this.waForm.whId) {
                    this.waForm.available = list[i].available == null ? list[i].whCapacity : list[i].available;
                    break;
                }
            }
        },
        //搜索，搜索时让page=1
        handlerSearch(){
            this.page=1;
            this.initData();
        },
        changeStatus(row){
            console.log(row.waId,row.waStatus);
            axios.put("http://192.168.124.96:9090/changeStatus?waId="+row.waId+"&status="+row.waStatus).then(res => {
                if (res.data.code == 0) {
                    this.$message({
                        type: "success",
                        message: res.data.msg
                    })
                    this.dialogFormVisible = false;
                    this.initData()
                }
            });
        },
        initData() {
            //axios.get("http://192.168.124.96:9090/warehouse?page="+this.page).then(res => {
            //console.log(res.data.obj);
            //res.data是ResultData,其中包含了code msg obj data
            //这里调用的分页查询，返回值中包含了一个分页模型对象obj
            //获取分页查询到的集合
            //axios.get("URL",{params:{k:var,k:v}})方式同时携带多个参数
            axios.get("http://192.168.124.96:9090/warehouseArea",
                {
                    params: {
                        page: this.page,
                        size: this.size,
                        keyword: this.keyword
                    }
                }
            ).then(res => {
                this.tableData = res.data.obj.records;
                //更改total的值
                this.total = res.data.obj.total;
                if (res.data.code != 0) {
                    this.$message({
                        type: "error",
                        message: res.data.msg
                    })
                    this.$router.replace("/")
                    return;
                }
                //res.data是ResultData，其中包含了code msg obj data 
                //这里调用的分页查询，返回值中包含了一个分页模型对象obj
                //获取分页查询到的集合
                this.tableData = res.data.obj.records;
                //更改total的值
                this.total = res.data.obj.total;
            });
        },
        hanldSubmit() {
            //由于当前页有外键关联字段，表格中有wh.whName属性
            //在编辑时会将该属性赋值给form对象，提交时业委会携带该属性
            //将该方法的参数不需要这个属性，这里删除即可
            delete this.form.wh;
            console.log(this.form);
            axios.post("http://192.168.124.96:9090/warehouseArea", qs.stringify(this.form)).then(res => {
                if (res.data.code == 0) {
                    this.$message({
                        type: 'success',
                        message: res.data.msg
                    });
                    this.dialogFormVisible = false;
                }
            })
        },
        toadd() {
            this.waForm = {}
            this.dialogAddWaFormVisible = true;
            axios.get("http://192.168.124.96:9090/canUseWarehouse").then(res => {
                if (res.data.code != 0) {
                    this.$message({
                        type:"error",
                        message:res.data.msg
                    })
                    this.$router.replace("/")
                    return;
                }
                this.canUseWarehouse = res.data.data;
            });
        },
        // 修改库区信息
        updateWa() {
            //显示数据时由于外键，使用了wh属性，修改时不需要，这里删除即可
            delete this.form.wh;
            axios.post("http://192.168.124.96:9090/warehouseArea", qs.stringify(this.form)).then(res => {
                if (res.data.code == 0) {
                    this.form.wh={},
                    this.$message({
                        type: "success",
                        message: res.data.msg
                    })
                    this.dialogFormVisible = false;
                }
            })
        },
        //添加库区信息
        addWa() {
            delete this.waForm.available;
            this.waForm.waStatus = 0;
            this.waForm.waAvailableCapacity = this.waForm.waCapacity;

            axios.post("http://192.168.124.96:9090/warehouseArea", qs.stringify(this.waForm)).then(res => {
                if (res.data.code == 0) {
                    this.$message({
                        type: "success",
                        message: res.data.msg
                    })
                    this.dialogAddWaFormVisible = false;
                }
            })
        },
        handleEdit(index, row) {
            console.log(index, row);
            //显示对话框
            this.dialogFormVisible = true;
            //填充表单
            this.form = row;
        },
        handleDelete(index, row) {
            //index表示当前行的索引
            //row表示当前行的数据
            //确认框
            this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                //点击确认后执行
                //发送delete请求
                axios.delete("http://192.168.124.96:9090/warehouseArea/" + row.waId).then(res => {
                    //删除成功后使用消息框显示
                    if (res.data.code == 0) {
                        //回到第一页
                        this.page = 1;
                        //删除成功后重新加载数据
                        this.initData()
                        this.$message({
                            type: 'success',
                            message: res.data.msg
                        });
                    } else {
                        this.$message({
                            type: 'error',
                            message: res.data.msg
                        });
                    }
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        },

        handleSizeChange(val) {
            //更新size
            this.size = val;
            this.initData()
        },
        handleCurrentChange(val) {
            //更新page
            this.page = val;
            this.initData()
        }
    },
}
</script>